<template>
  <layout :config="navConfig">
    <template #default>
      <div class="m-bottom--nav">
        <div
          :class="['node-item', {active: $item.value===activeNav}]"
          v-for="$item in NavData"
          :key="$item.label"
          @click="handleSelect($item)"
        >
          <i :class="['iconfont', $item.icon]"></i>
          <span>{{$item.label}}</span>
        </div>
      </div>
      <component :is="activeNav"></component>
    </template>
  </layout>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { INavigation } from "@/types";
import { mapState } from "vuex";
import Tab1 from "@/components/index/tab1.vue";
import Tab2 from "@/components/index/tab2.vue";
import Tab3 from "@/components/index/tab3.vue";

@Component({
  name: "Index",
  components: {
    "tab-1": Tab1,
    "tab-2": Tab2,
    "tab-3": Tab3
  },
  computed: mapState({
    activeNav: ({ App }) => App.activeBottomNav
  })
})
export default class extends Vue {
  activeNav!: string;
  navConfig: INavigation = {
    text: "首页",
    isShowLeftArrow: false
  };
  NavData = [
    {
      icon: "icon-copper-coin-line",
      label: "首页",
      value: "tab-1"
    },
    {
      icon: "icon-safe-line",
      label: "匹配区",
      value: "tab-2"
    },
    {
      icon: "icon-account-pin-box-line",
      label: "个人中心",
      value: "tab-3"
    }
  ];

  handleSelect(row: any) {
    this.navConfig.text = row.label;
    this.$store.commit("changeActiveBottomNav", row.value);
  }
}
</script>

<style lang="scss">
@import "../assets/styles/index.scss";
</style>

